<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-table
        :data="tableData"
        max-height="600"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" width="100"> </el-table-column>
        <el-table-column
          property="connected_interface"
          label="已连接端口"
          width="220"
        >
        </el-table-column>
        <el-table-column property="ip_address" label="ip地址" width="220">
        </el-table-column>
        <el-table-column property="phys_address" label="MAC地址">
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left; margin-top: 10px">
        <el-pagination layout="total" :total="count"> </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import atInfo from "../../../json_data/atInfo.json";
import { get } from "../../request";
export default {
  data() {
    return {
      tableData:[],
      count:0
    };
  },
  components: {},
   mounted() {
    setInterval(this.sendRequest, 5000);
  },
  methods: {
    sendRequest() {
      get({
        url: "/getatinfo",
      })
        .then((res) => {
          // var json_data = res.data.data;
          // console.log(res.data);
          this.loadData(res.data);
        })
        .catch((res) => {
        });
    },
    loadData(atInfo) {
      this.tableData = atInfo["atResult"];
      this.count = atInfo["atResult"].length;
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
  padding: 20px;
}
</style>
